<template>
  <view class="points-container">
    <scroll-view scroll-y="true" :style="{height: scrollHeight}" :refresher-enabled="false"
      @scrolltolower="onScrolltolower">
      <view class="points-info">
        <view class="info-right u-flex-1 u-line-1 u-m-l-10 u-f-ajc u-f-column">
          <view class="u-m-b-20">
            代金券总额
          </view>
          <view class="u-m-b-20 points-num u-line-1">
            {{ account_balance }}
          </view>
          <view class="u-m-b-20"></view>
        </view>
      </view>
      <view class="points-list">
        <view class="points-title u-text-center">
          代金券明细
        </view>
        <view class="">
          <u-empty text="您还没有代金券记录哦~" mode="list" v-if="!pointsList.length && finished"></u-empty>
          <view class="points-item u-flex" v-for="(point, index) in pointsList" :key="index" v-else>
            <view class="u-flex-1">
              <view class="u-m-b-15">
                <view style="color: #FD5B00;">{{ point.detail}}</view>
                <view>{{ point.reason }}</view>
              </view>
              <view class="points-time">
                {{ point.time | date('yyyy-mm-dd hh:MM:ss') }}
              </view>
            </view>
            <view class="u-text-right">
              <!-- <view style="color: #999;">{{point.id}}</view> -->
              <view class="">
                总额：{{ point.money}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import * as API_Deposit from '@/api/deposit'
  import * as API_Members from '@/api/members.js'
  export default {
    data() {
      return {
        params: {
          page_no: 1,
          page_size: 10
        },
        points: '', //代金券
        pointsList: [], //代金券明细列表
        finished: false, //是否已加载完毕
        scrollHeight: '', //页面滚动高度
        account_balance: 0,
      }
    },
    onLoad() {
      this.scrollHeight = uni.getSystemInfoSync().windowHeight + 'px'
      this.getPointsData()
    },
    methods: {
      //获取代金券明细
      async getPointsData() {
        let {
          data
        } = await API_Deposit.getDepositLogsList(this.params)
        console.log(data)
        if (data && data.length) {
          this.pointsList = this.pointsList.concat(data)
        } else {
          this.finished = true
        }
        this.account_balance = await API_Deposit.getDepositBalance()
      },
      // 滚动加载更多数据
      onScrolltolower() {
        if (this.finished) return
        this.params.page_no += 1
        this.getPointsData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .points-container {
    .points-info {
      padding: 55rpx 40rpx;
      height: 400rpx;
      color: #FFFFFF;
      display: flex;
      background-image: url(../static/images/bg/bg3.png);
      background-size: 100% 100%;

      .points-num {
        font-size: 70rpx;
        font-weight: 600;
      }

      .info-left,
      .info-right {
        width: 300rpx;
      }
    }

    .points-list {
      background-color: #FFFFFF;
      border-radius: 20rpx;
      margin: -90rpx 30rpx 90rpx 30rpx;
      min-height: 800rpx;

      /deep/ .u-empty {
        margin-top: 200rpx !important;
      }

      .points-title {
        height: 90rpx;
        line-height: 90rpx;
        color: #FD5B00;
        font-weight: 600;
      }

      .points-item {
        margin: 0 30rpx;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #EEEEEE;

        &:last-child {
          border-bottom: none;
        }

        .points-time {
          font-size: 24rpx;
          color: #878787;
        }
      }
    }
  }
</style>
